
<template>
  <!-- 积分类别页面 -->
  <div class="app-container">
    <!-- 其他操作 -->
    <section class="filter-container">
      <el-row>
        <el-button type="primary" size="small" @click="openForm('add')">添加类别</el-button>
      </el-row>
    </section>
    <!-- 表格数据 -->
    <el-table :data="tableList" v-loading="loading" element-loading-text="正在查询中。。。" stripe highlight-current-row>
      <el-table-column type="index" align="center" width="50">
      </el-table-column>
      <el-table-column prop="integraltype_name" align="center" label="类别名称">
      </el-table-column>
      <el-table-column prop="integraltype_desc" align="center" label="描述">
      </el-table-column>
      <el-table-column prop="integraltype_scale" align="center" label="每积分可兑换金额（元）">
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <i class="iconfont ali-edit-2" @click="openForm('edit', scope.row)"></i>
          &nbsp;
          <i class="iconfont ali-bin" @click="delRow(scope.row)"></i>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <section>
      <so-pagination :query="listQuery" @initList="initList"/>
    </section>
    <!-- 添加编辑类别模态框 -->
    <section>
      <el-dialog width="600px" :title="dialog.state=='add'?'添加类别':'编辑类别'" :visible.sync="dialog.show">
        <div>
          <el-form ref="form" :model="form" label-width="135px">
            <el-form-item label="名称" prop="integraltype_name" :rules="filter_rules({required:true})">
              <el-input v-model.trim="form.integraltype_name" style="width: 390px" placeholder="请输入类别名称"></el-input>
            </el-form-item>
            <el-form-item label="描述">
              <textarea cols="49" rows="7" class="form-text" placeholder="请输入描述" v-model.trim="form.integraltype_desc"></textarea>
            </el-form-item>
            <el-form-item label="每积分可兑换金额" prop="integraltype_scale" :rules="filter_rules({required:true})">
              <el-input v-model.number="form.integraltype_scale" style="width: 390px" placeholder="请输入可兑换金额"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialog.show = false">取 消</el-button>
          <el-button type="primary" @click="validate('form')">确 定</el-button>
        </span>
      </el-dialog>
    </section>
  </div>
</template>
<script>
import { integraltype_list, integraltype_save, integraltype_edit, integraltype_delete } from '@/api/integraltype'
import SoPagination from '@/components/SoPagination'

export default {
  name: "integralClass",
  components: { SoPagination },
  data() {
    return {
      loading: false,
      tableList: [],
      listQuery: { start: 0, limit: 10, total: 0, current: 1 },
      dialog: { show: false, state: '' },
      form: {}
    };
  },
  methods: {
    openForm(state, e) {
      this.dialog = { state: state, show: true }
      this.form = e != null ? e : {};
    },
    async delRow(row) {
      try {
        let res = await this.$confirm('确认删除吗？')
        if (res == 'confirm') {
          this.loading = true;
          let { data } = await integraltype_delete(row);
          this.loading = false;
          if (data.status == 100) {
            this.$message.success('删除成功')
            this.initList();
          }
        }
      } catch (error) {
        console.log(error, 'error')
      }
    },
    async saveObj() {
      this.loading = true
      const parms = {...this.form, company_id: localStorage.getItem('companyId') - 0}
      const { data } = await integraltype_save(parms)
      if (data.status == 100) {
        this.$message.success("添加成功")
      }
      this.loading = false;
      this.initList();
    },
    async editObj() {
      this.loading = true
      const parms = {...this.form}
      const { data } = await integraltype_edit(parms)
      if (data.status == 100) {
        this.$message.success("编辑成功")
      }
      this.loading = false;
      this.initList();
    },
    validate(e) {
      this.$refs[e].validate((valid) => {
        if (valid) {
          this.dialog.show = false;
          this.dialog.state == 'add'? this.saveObj(): this.editObj();
        } else {
          return false;
        }
      });
    },
    async initList() {
      this.loading = true
      const query = {...this.listQuery, company_id: localStorage.getItem('companyId') - 0};
      const { data } = await integraltype_list(query);
      this.loading = false
      if (data.status == 100) {
        this.tableList = data.data.rows;
        this.listQuery.total = data.data.results;
      }
    }
  },
  created() {
    this.initList()
  }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.ali-edit-2 {
  cursor: pointer;
  color: #e6a23d;
}

.ali-bin {
  cursor: pointer;
  color: #f56c6c;
}

.form-text{
  padding: 10px;
  border-radius: 3px;
}
</style>


